<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>存储配置</title>
  <link rel="stylesheet" href="{__CSS__}/element_ui.css"/>
  <link rel="stylesheet" href="{__CSS__}/style.css"/>
  <script src="{__JS__}/vue2.js"></script>
  <script src="{__JS__}/element_ui.js"></script>
  <script src="{__JS__}/axios.min.js"></script>
  <script src="{__JS__}/request.js"></script>
</head>
<body>
<div id="app">
  <div class="app-loading" v-if="pageLoading">
    <div class="app-loading__logo">
      <img src="{__IMG__}/logo.png"/>
    </div>
    <div class="app-loading__loader"></div>
    <div class="app-loading__title">{$title}</div>
  </div>
  <el-card class="box-card" v-else>
    <div slot="header" class="clearfix">
      <span>存储配置</span>
    </div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="默认开启引擎" name="first">
        <el-form ref="form" :model="baseForm" label-width="80px">
          <el-form-item label="默认引擎">
            <el-radio label="local" v-model="baseForm.store_way">本地存储</el-radio>
            <el-radio label="aliyun" v-model="baseForm.store_way">阿里云OSS</el-radio>
            <el-radio label="qcloud" v-model="baseForm.store_way">腾讯云COS</el-radio>
            <el-radio label="qiniu" v-model="baseForm.store_way">七牛云KODO</el-radio>
          </el-form-item>
          <el-form-item style="margin-top: 50px;">
            <el-button type="primary" @click="baseSubmit" style="width: 200px;">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="阿里云OSS" name="second">
        <el-form ref="form" :model="aliform" :label-position="labelPosition" label-width="160px">
          <el-form-item label="空间域名 Domain" style="width:700px">
            <el-input v-model="aliform.oss_domain"></el-input>
          </el-form-item>
          <el-form-item label="AccessKey ID" style="width:700px">
            <el-input v-model="aliform.accesskey_id"></el-input>
          </el-form-item>
          <el-form-item label="AccessKey Secret" style="width:700px">
            <el-input v-model="aliform.accesskey_secret"></el-input>
          </el-form-item>
          <el-form-item label="Bucket" style="width:700px">
            <el-input v-model="aliform.bucket"></el-input>
          </el-form-item>
          <el-form-item label="Endpoint" style="width:700px">
            <el-input v-model="aliform.endpoint"></el-input>
          </el-form-item>
          <el-form-item style="margin-top: 50px;">
            <el-button type="primary" @click="aliSubmit" style="width: 200px;">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="腾讯云COS" name="third">
        <el-form ref="form" :model="qcloudform" :label-position="labelPosition" label-width="160px">
          <el-form-item label="腾讯云APPID" style="width:700px">
            <el-input v-model="qcloudform.tencent_appid"></el-input>
          </el-form-item>
          <el-form-item label="空间域名 Domain" style="width:700px">
            <el-input v-model="qcloudform.tencent_domain"></el-input>
          </el-form-item>
          <el-form-item label="SecretId" style="width:700px">
            <el-input v-model="qcloudform.secret_id"></el-input>
          </el-form-item>
          <el-form-item label="SecretKey" style="width:700px">
            <el-input v-model="qcloudform.secret_key"></el-input>
          </el-form-item>
          <el-form-item label="存储桶名称" style="width:700px">
            <el-input v-model="qcloudform.tencent_bucket"></el-input>
          </el-form-item>
          <el-form-item label="所属地域" style="width:700px">
            <el-input v-model="qcloudform.tencent_endpoint"></el-input>
          </el-form-item>
          <el-form-item style="margin-top: 50px;">
            <el-button type="primary" @click="qcloudSubmit" style="width: 200px;">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="七牛云KODO" name="fourth">
        <el-form ref="form" :model="qiniuform" :label-position="labelPosition" label-width="160px">
          <el-form-item label="空间域名 Domain" style="width:700px">
            <el-input v-model="qiniuform.qiniu_domain"></el-input>
          </el-form-item>
          <el-form-item label="accessKey" style="width:700px">
            <el-input v-model="qiniuform.accesskey"></el-input>
          </el-form-item>
          <el-form-item label="secretKey" style="width:700px">
            <el-input v-model="qiniuform.secretkey"></el-input>
          </el-form-item>
          <el-form-item label="空间名称" style="width:700px">
            <el-input v-model="qiniuform.qiniu_bucket"></el-input>
          </el-form-item>
          <el-form-item label="存储区域" style="width:700px">
            <el-input v-model="qiniuform.qiniu_endpoint"></el-input>
          </el-form-item>
          <el-form-item style="margin-top: 50px;">
            <el-button type="primary" @click="qiniuSubmit" style="width: 200px;">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</div>

<script>

  let store = {$store|raw};
  let aliyun = {$aliyun|raw};
  let qiniu = {$qiniu|raw};
  let qcloud = {$qcloud|raw};

  new Vue({
    el: '#app',
    data: function () {
      return {
        pageLoading: true,
        baseIndex: '/{:config("shop.backend_index")}/',
        labelPosition: 'right',
        activeName: 'first',
        baseForm: store,
        aliform: aliyun,
        qcloudform: qcloud,
        qiniuform: qiniu,
        form: {}
      }
    },
    mounted() {
      this.pageLoading = false
    },
    methods: {
      baseSubmit() {
        this.form = this.baseForm
        this.doSubmit()
      },
      aliSubmit() {
        this.form = this.aliform
        this.doSubmit()
      },
      qcloudSubmit() {
        this.form = this.qcloudform
        this.doSubmit()
      },
      qiniuSubmit() {
        this.form = this.qiniuform
        this.doSubmit()
      },
      async doSubmit() {
        let res = await request.post(this.baseIndex + 'system/store', this.form)
        if (res.code == 0) {
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      }
    }
  })
</script>
</body>
</html>